<template>
  <div class="container" @click.stop="showLanguage = false">
    <div class="page_content container-tt">
      <header class="flex_between">
        <div class="headLogo">
          <div class="flex_ shou" @click="goToApp('video')">
            <img
              src="/static/logo.svg"
              class="img"
              alt="logo"
              width="34"
              height="34"
            />
            <span class="projectName">SavingTik</span>
          </div>
        </div>
        <div class="headTabs flex_">
          <!-- <div class="tItem shou" @click="goToApp('video')">
              {{ currentObj.TikTokDownloader }}
            </div> -->
          <div class="tItem shou" @click="goToApp('mp3')">
            Download TikTok MP3
          </div>
          <div class="tItem shou" @click="goToApp('story')">
            Download TikTok Story
          </div>
          <language ref="languageRef" :pageType="true"></language>
        </div>
        <div class="drawer" @click="showAppRightHandel">
          <img src="/static/menu.png" class="img" alt="" />
        </div>
      </header>
      <div class="blog-content">
        <div class="title-content">
          <h1 class="title">Blog</h1>
          <h2 class="text">
            Rich and interesting TikTok blog posts, reading new things and new
            knowledge.
          </h2>
        </div>
        <div class="list-content">
          <div class="list-big">
            <nuxt-link :to="`/blog${bigObj.url}`">
              <div class="cover">
                <img
                  :src="bigObj.imageUrl"
                  class="img"
                  :alt="bigObj.imageDescription"
                />
              </div>
            </nuxt-link>
            <a @click.stop :href="`/blog/topics/${bigObj.type}`">
              <div class="cate shou">
                {{ bigObj.type }}
              </div>
            </a>
            <nuxt-link :to="`/blog${bigObj.url}`">
              <h1 class="list-title shou">
                {{ bigObj.articleTitle }}
              </h1>
            </nuxt-link>
            <div class="info flex_">
              <div class="info_1">by</div>
              <div class="info_2 shou">
                <a @click.stop :href="`/blog/author${bigObj.authorUrl}`">
                  <div>{{ bigObj.author }}</div>
                </a>
              </div>
              <div class="info_3"></div>
              <div class="info_4">{{ bigObj.updateTime }}</div>
            </div>
          </div>
          <div class="list flex_between">
            <div class="item shou" :key="k" v-for="(item, k) in dataList">
              <nuxt-link :to="`/blog${item.url}`">
                <div class="cover">
                  <img
                    :src="item.imageUrl"
                    class="img"
                    :alt="item.imageDescription"
                  />
                </div>
              </nuxt-link>
              <nuxt-link :to="`/blog/topics/${item.type}`">
                <div class="cate">
                  {{ item.type }}
                </div>
              </nuxt-link>
              <nuxt-link :to="`/blog${item.url}`">
                <div class="list-title">
                  {{ item.articleTitle }}
                </div>
              </nuxt-link>
              <div class="info flex_">
                <div class="info_1">by</div>
                <nuxt-link :to="`/blog/author${item.authorUrl}`">
                  <div class="info_2 shou">
                    {{ item.author }}
                  </div>
                </nuxt-link>
                <div class="info_3"></div>
                <div class="info_4">{{ item.updateTime }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination flex_center">
          <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul class="flex_" style="">
                <li
                  class="prev"
                  :class="{ disabled: pageNo === 1 }"
                  @click="pageNo > 1 ? getPageNo(pageNo - 1) : null"
                >
                  <div class="left-active shou"></div>
                  <div class="left-disabled shou"></div>
                </li>
                <li
                  v-show="startNumAndEndNum.start > 1"
                  :class="{ active: pageNo === 1 }"
                  @click="getPageNo(1)"
                >
                  <a>1</a>
                </li>
                <li class="dotted" v-show="startNumAndEndNum.start > 2">
                  <span>...</span>
                </li>

                <!-- 中间部分 -->
                <li
                  v-for="(page, index) in pagesArr"
                  :key="index"
                  :class="{ active: pageNo === page }"
                  @click="getPageNo(page)"
                >
                  <a>{{ page }}</a>
                </li>

                <li
                  class="dotted"
                  v-show="startNumAndEndNum.end < totalPage - 1"
                >
                  <span>...</span>
                </li>
                <li
                  v-show="startNumAndEndNum.end < totalPage"
                  :class="{ active: pageNo === totalPage }"
                  @click="getPageNo(totalPage)"
                >
                  <a>{{ totalPage }}</a>
                </li>
                <li
                  class="next"
                  :class="{ disabled: pageNo === totalPage }"
                  @click="pageNo < totalPage ? getPageNo(pageNo + 1) : null"
                >
                  <div class="right-active shou"></div>
                  <div class="right-disabled shou"></div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <!-- <pc-footer></pc-footer> -->
        <div class="bottom_nav flex_between">
          <div class="logo">
            <img src="@/static/big-logo.svg" class="img" alt="SavingTik" />
          </div>
          <div class="nav_list flex_">
            <div class="item">
              <div class="item_title">Company</div>
              <nuxt-link to="/contact">
                <div class="item_text shou">contact</div>
              </nuxt-link>
              <nuxt-link to="/blog">
                <div class="item_text shou">blog</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title shou">Legal</div>
              <nuxt-link to="/terms-of-use">
                <div class="item_text">Terms of use</div>
              </nuxt-link>
              <nuxt-link to="/privacy-policy">
                <div class="item_text">Privacy Policy</div>
              </nuxt-link>
            </div>
            <div class="item">
              <div class="item_title">Tools</div>
              <!-- <div @click="goToTools('video')" class="item_text shou">
              {{ currentObj.TikTokDownloader }}
            </div>
            <div @click="goToTools('mp3')" class="item_text shou">
              {{ currentObj.DownloadTikTokMP3 }}
            </div>
            <div @click="goToTools('story')" class="item_text shou">
              {{ currentObj.DownloadTikTokStory }}
            </div> -->
              <nuxt-link to="/save-tiktok-videos-without-posting">
                <div class="item_text shou">
                  How to save tiktok videos without posting
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page_bottom flex_center">
      ©SavingTik.Com 2023 All Rights Reserved.
    </div>
    <article-content></article-content>
    <div class="app_page_bottom">
      <!-- <app-footer></app-footer> -->
      <div class="hefl flex_center">
        ©SavingTik.Com 2023 All Rights Reserved.
      </div>
      <div class="link flex_ccenter">
        <nuxt-link to="/contact">
          <div>contact</div>
        </nuxt-link>
        <nuxt-link to="/terms-of-use">
          <div class="tr">Terms of use</div>
        </nuxt-link>
        <nuxt-link to="/privacy-policy">
          <div>Privacy Policy</div>
        </nuxt-link>
        <nuxt-link to="/blog">
          <div>blog</div>
        </nuxt-link>
      </div>
    </div>
    <video src="" id="video" autoplay muted v-show="false"></video>
    <div class="dloading" v-if="dloading">
      <div class="loader"></div>
    </div>
    <van-popupapp ref="popupAppRef"></van-popupapp>
    <div class="loading-screen" v-if="loading">
      <svg viewBox="25 25 50 50">
        <circle r="20" cy="50" cx="50"></circle>
      </svg>
    </div>
  </div>
</template>
        
        <script>
import { handleClick } from "@/plugins/Firebase.js";
import language from "@/components/language.vue";
import VanPopupapp from "@/components/vanPopupapp.vue";
import PcFooter from "@/components/pcFooter.vue";
import AppFooter from "@/components/appFooter.vue";
import { mapState, mapGetters, mapMutations } from "vuex";
import dataListTools from "@/static/tools.js";
import CryptoJS from "crypto-js";
import { encryptUrl, decryptUrl } from "~/utils/encryption";
export default {
  components: { language, VanPopupapp, PcFooter, AppFooter },
  head() {
    return {
      title: "Blog - SavingTik",
      script: this.myScript,
      meta: [
        {
          name: "viewport",
          content:
            "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no",
        },
        { name: "robots", content: "index, follow" },
        { name: "revisit-after", content: "1 days" },
        {
          name: "description",
          content:
            "The SavingTik blog channel has a wealth of Tiktok tutorials, video downloads, and sharing of the best tools.",
        },
        {
          itemprop: "name",
          content: "Blog - SavingTik",
        },
        { name: "author", content: "SavingTik" },
        { property: "og:locale", content: "en" },
        { name: "msvalidate.01", content: "" },
        { itemprop: "image", content: "/static/logo/savingtik-thumb.webp" },
        { name: "twitter:card", content: "summary" },
        { name: "twitter:title", content: "Blog - SavingTik" },
        {
          name: "twitter:description",
          content:
            "The SavingTik blog channel has a wealth of Tiktok tutorials, video downloads, and sharing of the best tools.",
        },
        {
          name: "twitter:image:src",
          content: "/static/logo/savingtik-thumb.webp",
        },
        { name: "twitter:site", content: "SavingTik" },
        { property: "og:title", content: "Blog - SavingTik" },
        { property: "og:type", content: "article" },
        { property: "og:image", content: "/static/logo/savingtik-thumb.webp" },
        {
          property: "og:description",
          content:
            "The SavingTik blog channel has a wealth of Tiktok tutorials, video downloads, and sharing of the best tools.",
        },
        { property: "og:site_name", content: "SavingTik" },
        { name: "google", content: "notranslate" },
      ],
      link: [
        // Favicons
        {
          rel: "shortcut icon",
          href: "/static/logo/favicon.png",
          sizes: "512x512",
        },
        {
          rel: "apple-touch-icon",
          href: "/static/logo/favicon.png",
          sizes: "192x192",
        },
        {
          rel: "canonical",
          href: "https://savingtik.com/",
        },
      ],
    };
  },
  data() {
    return {
      loading: false,
      myTitle: "",
      myDescription: "",
      myScript: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      continues: 4,
      dataList: [],
      // list: dataList.listEn,
      list: [
        {
          isOpen: false,
          title: "Can I Download TikTok Videos Without Posting?",
          textContent: `Absolutely. It's entirely feasible to save TikTok videos to your gallery or camera roll without making them public. This feature is particularly useful for those who wish to review or edit their videos before sharing, or simply keep them for personal archives.`,
        },
        {
          isOpen: false,
          title: "Can I Save a TikTok Video Before Posting?",
          text: [
            `Yes, indeed! You can save your video to drafts, and then follow the steps outlined earlier to save it without posting. This method is perfect for when you're still working on your video or if you decide not to share it but want to keep a copy.`,
          ],
        },
        {
          isOpen: false,
          title: "Will Saving a Video in Private Mode Affect Its Quality?",
          text: [
            `No, saving a TikTok video in private mode does not degrade its quality. The video is saved in the same resolution and quality as it was originally created or uploaded. This ensures that you retain the best version of your creative work, whether for personal use or future editing.`,
          ],
        },
      ],
      input: "",
      dloading: false,
      showAppRight: false,
      showLanguage: false,
      Language: "en_GB",
      isHttpLoading: false,
      downSuccess: false,
      downStorySuccess: false,
      httpError: false,
      downData: {},
      WithoutVideoSize: "",
      duration: "",
      VideoSize: "",
      currentList: dataListTools.list,
      list1: [
        "en", // 英语
        "id", // 印度尼西亚语
        "vn", // 越南语
        "ms", // 马来语
        "jv", // 爪哇语
        "cs", // 捷克语
        "es", // 西班牙语
        "fr", // 法语
        "de", // 德语
        "it", // 意大利语
        "hu", // 匈牙利语
        "nl", // 荷兰语
        "pl", // 波兰语
        "pt", // 葡萄牙语
        "ro", // 罗马尼亚语
        "th", // 泰语
        "tr", // 土耳其语
        "el", // 希腊语
        "uk", // 乌克兰语
        "ru", // 俄语
        "ar", // 阿拉伯语
        "ko", // 韩语
        "ja", // 日语
      ],
    };
  },

  async asyncData({ env }) {
    const pageSize = 10;
    const pageNo = 1;
    const encryptedData = encryptUrl(
      JSON.stringify({
        pageSize: pageSize,
        pageNo: pageNo,
        packageName: "WebTt",
      }),
      env
    );
    try {
      const response = await fetch(
        "https://savingtik.com/js/a/api/cms/web/listData",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ condition: encryptedData }),
        }
      );

      // 确保响应状态是OK的
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const responseJson = await response.json();
      let data = JSON.parse(decryptUrl(responseJson.data, env));
      if (data.list.length == 0)
        return { dataList: [], bigObj: null, total: 0 };
      let Obj = data.list[0];
      data.list.shift();
      let dataList = data.list.map((x) => {
        let date = new Date(x.updateTime);
        let month = date.toLocaleString("en-US", { month: "short" });
        let day = date.getDate();
        let year = date.getFullYear();
        x.updateTime = `${month} ${day}, ${year}`;
        return x;
      });

      return { dataList: dataList, bigObj: Obj, total: data.count };
    } catch (error) {
      console.error(error);
      return { dataList: [], bigObj: {}, total: 0 };
    }
  },

  mounted() {},
  computed: {
    ...mapGetters(["language"]),
    currentObj() {
      return this.currentList[this.current];
    },
    current() {
      return this.list1.findIndex((x) => x == this.language);
    },
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    // 连续页码起始数字与结束数字
    startNumAndEndNum() {
      const { pageNo, continues, totalPage } = this;
      let start = 0;
      let end = 0;
      // 如果总页数少于连续页数
      if (totalPage < continues) {
        start = 1;
        end = totalPage;
      } else {
        start = pageNo - Math.floor(continues / 2);
        end = pageNo + Math.floor(continues / 2);
        // start出现0/负数
        if (start < 1) {
          start = 1;
          end = continues;
        }
        // end大于总页数
        if (end > totalPage) {
          start = totalPage - continues + 1;
          end = totalPage;
        }
      }
      return { start, end };
    },
    pagesArr() {
      let arr = [];
      // 连续页码个数
      arr.length =
        this.totalPage < this.continues ? this.totalPage : this.continues;
      // 第一个连续页码
      let pageNum = this.startNumAndEndNum.start;
      for (let i = 0; i < arr.length; i++) {
        arr[i] = pageNum;
        pageNum++;
      }
      return arr;
    },
  },
  methods: {
    updateTitleAndDescription(newTitle, newDescription, newScript) {
      this.myTitle = newTitle;
      this.myDescription = newDescription;
      if (newScript) {
        this.myScript.push(newScript);
      }
    },
    getArticleList() {
      this.loading = true;
      let that = this;
      let result = this.encryptUrl(
        JSON.stringify({
          pageSize: 10,
          pageNo: that.pageNo,
          packageName: "WebTt",
        })
      );
      fetch("https://savingtik.com/js/a/api/cms/web/listData", {
        method: "POST",
        body: JSON.stringify({
          condition: result,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        response.json().then(async (data) => {
          this.loading = false;
          data = await this.decryptUrl(data.data);
          let res = JSON.parse(data);
          console.log(res);
          if (res.list.length == 0) return;
          if (res.list.length != 0) {
            res.list.forEach((x) => {
              let date = new Date(x.updateTime);
              let month = date.toLocaleString("en-US", { month: "short" });
              let day = date.getDate();
              let year = date.getFullYear();
              x.updateTime = month + " " + day + ", " + year;
            });
          }
          that.bigObj = res.list[0];
          // localStorage.setItem("bigObj", JSON.stringify(res.list[0]));
          res.list.shift();
          that.dataList = res.list;
          that.total = res.count;
        });
      });
    },
    encryptUrl(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        const keyBytes = CryptoJS.enc.Utf8.parse(KEY_PWD);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    decryptUrl(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
      let KEY_PWD = process.env.DES_CMS_KEY;
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          KEY_PWD.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_CMS_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    getPageNo(newPageNo) {
      this.pageNo = newPageNo;
      this.getArticleList();
      // 你也可以在这里加入更多的逻辑
      // 例如，你可能希望用新的页面编号来发送一个新的API请求
    },
    showAppRightHandel() {
      this.$refs.popupAppRef.open();
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    goToApp(type) {
      let url = "";
      switch (type) {
        case "video":
          url = "";
          break;
        case "mp3":
          url = "/download-tiktok-mp3";
          break;
        default:
          url = "/download-tiktok-story";
      }
      if (this.language !== "en") {
        url = `/${this.language}${url}`;
      } else if (this.language == "en" && type == "video") {
        url = `/`;
      }
      this.$router.push(url);
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTop(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "top",
      });
    },
    goToTools(type) {
      // 切换页面 action_page_switch
      handleClick("action_page_switch", {
        site: type,
        from: "tools",
      });
    },

    changeLanguage() {
      if (this.$i18n.locale == "en") {
        this.$i18n.setLocale("zh");
      } else {
        this.$i18n.setLocale("en");
      }
    },
    changeFaqItemOpen(item, k) {
      item.isOpen = !item.isOpen;
    },
  },
};
</script>
        <style lang="scss" scoped>
.loading-screen {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 3.25em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
}

circle {
  fill: none;
  stroke: hsl(214, 97%, 59%);
  stroke-width: 2;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}
button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
@media (min-width: 992px) {
  .container-tt {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .blog-content {
    color: #fff;
    flex: 1;
    padding: 0 30px;
    .title-content {
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.15);
      .title {
        margin-top: 40px;
        font-size: 56px;
        font-weight: 700;
      }
      .text {
        margin-top: 20px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .list-content {
      padding-top: 40px;
      .list-big {
        .cover {
          width: 100%;
          height: 380px;
          border-radius: 28px;
          overflow: hidden;
          .img {
            object-fit: cover;
            transition: transform 500ms;
          }
        }
        .cover:hover {
          .img {
            transform: scale(1.1);
          }
        }
        .cate {
          margin: 20px 0 20px;
          font-size: 18px;
          font-weight: 700;
          color: #f9224c;
        }
        .list-title {
          font-size: 36px;
          font-weight: 700;
        }
        .list-title:hover {
          text-decoration: underline;
        }
        .info {
          margin-top: 20px;
          font-size: 18px;
          .info_2 {
            color: #3ec5fd;
            margin-left: 6px;
          }
          .info_3 {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin: 0 10px;
          }
          .info_4 {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .list {
        padding: 60px 0;
        flex-wrap: wrap;
        align-items: stretch;
        .item {
          width: 47%;
          margin-bottom: 30px;
          .cover {
            overflow: hidden;
            width: 100%;
            height: 250px;
            border-radius: 16px;
            object-fit: cover;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 18px 0;
            font-size: 18px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            font-size: 28px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 20px;
            font-size: 18px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
    .pagination {
      .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .left-disabled {
        margin-right: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                display: inline-block;
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.5);
                cursor: pointer;
              }

              &.active {
                a {
                  color: #3ec6ff;
                  cursor: default;
                }
              }

              &.prev {
                .left-active {
                  display: block !important;
                }
                .left-disabled {
                  display: none !important;
                }
                a {
                  margin-left: 0px;
                  background-color: #fafafa;
                }
              }

              &.disabled {
                .left-active {
                  display: none !important;
                }
                .left-disabled {
                  display: block !important;
                }
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  width: 50px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                }
              }

              &.next {
                a {
                }
                .right-active {
                  display: block !important;
                }
                .right-disabled {
                  display: none !important;
                }
              }
              &.disabled {
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 80px;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .container-tt {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
  .blog-content {
    color: #fff;
    flex: 1;
    padding: 0 30px;
    .title-content {
      padding-bottom: 24px;
      border-bottom: 1px solid rgba(217, 217, 217, 0.15);
      .title {
        margin-top: 40px;
        font-size: 56px;
        font-weight: 700;
      }
      .text {
        margin-top: 20px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .list-content {
      padding-top: 40px;
      .list-big {
        .cover {
          width: 100%;
          height: 420px;
          border-radius: 28px;
          overflow: hidden;
          .img {
            object-fit: cover;
            transition: transform 500ms;
          }
        }
        .cover:hover {
          .img {
            transform: scale(1.1);
          }
        }
        .cate {
          margin: 20px 0 20px;
          font-size: 18px;
          font-weight: 700;
          color: #f9224c;
        }
        .list-title {
          font-size: 36px;
          font-weight: 700;
        }
        .list-title:hover {
          text-decoration: underline;
        }
        .info {
          margin-top: 20px;
          font-size: 18px;
          .info_2 {
            color: #3ec5fd;
            margin-left: 6px;
          }
          .info_3 {
            width: 3px;
            height: 3px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            margin: 0 10px;
          }
          .info_4 {
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .list {
        padding: 60px 0;
        flex-wrap: wrap;
        align-items: stretch;
        .item {
          width: 47%;
          margin-bottom: 30px;
          .cover {
            overflow: hidden;
            width: 100%;
            height: 280px;
            border-radius: 16px;
            object-fit: cover;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 18px 0;
            font-size: 18px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            font-size: 28px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 20px;
            font-size: 18px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
    .pagination {
      .left-active {
        margin-right: 20px;
        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .left-disabled {
        margin-right: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/prev-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-active {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-active.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .right-disabled {
        margin-left: 20px;

        width: 26px !important;
        height: 26px !important;
        background-image: url("@/static/next-disabled.webp");
        background-size: 26px 26px;
        background-repeat: no-repeat;
      }
      .page {
        display: flex;
        justify-content: center;
        overflow: hidden;

        .sui-pagination {
          margin: 18px 0;

          ul {
            margin-left: 0;
            margin-bottom: 0;

            li {
              line-height: 18px;
              display: inline-block;

              a {
                display: inline-block;
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.5);
                cursor: pointer;
              }

              &.active {
                a {
                  color: #3ec6ff;
                  cursor: default;
                }
              }

              &.prev {
                .left-active {
                  display: block !important;
                }
                .left-disabled {
                  display: none !important;
                }
                a {
                  margin-left: 0px;
                  background-color: #fafafa;
                }
              }

              &.disabled {
                .left-active {
                  display: none !important;
                }
                .left-disabled {
                  display: block !important;
                }
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
                a {
                  color: #999;
                  cursor: default;
                }
              }

              &.dotted {
                span {
                  width: 50px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                }
              }

              &.next {
                a {
                }
                .right-active {
                  display: block !important;
                }
                .right-disabled {
                  display: none !important;
                }
              }
              &.disabled {
                .right-active {
                  display: none !important;
                }
                .right-disabled {
                  display: block !important;
                }
              }
            }
          }

          div {
            color: #333;
            font-size: 14px;
            float: left;
            width: 80px;
          }
        }
      }
    }
  }
}
@media (min-width: 1024px) {
  .page_content {
    min-height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      /* // position: relative; */
      padding: 14px 0;
      z-index: 999;
      .headLogo {
        width: 34px;
        height: 34px;
        .projectName {
          font-size: 21px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 14px;
        }
      }
      .drawer {
        display: none;
      }
      .headTabs {
        .tItem {
          position: relative;
          text-align: right;
          height: 58px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 58px;
          margin-left: 70px;

          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .bor {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }
    }

    .footer {
      /* // position: relative; */

      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-10px, -27px);
          width: 132px;
          height: 171px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            width: 200px;

            .item_title {
              margin-bottom: 20px;
              font-size: 18px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    margin-top: 30px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
  .app_page_bottom {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* 当设备屏幕宽度小于等于1023像素时，应用其中定义的样式。 */

  .page_content {
    padding: 0 24px;
    min-height: 100vh;
    z-index: 100;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    header {
      /* // position: relative; */
      padding: 14px;
      z-index: 999;
      .headLogo {
        transform: translateX(-14px);
        width: 19px;
        height: 19px;
        .projectName {
          font-size: 12px;
          font-family: Inter-Extra Bold Italic, Inter;
          font-weight: 800;
          font-style: italic;
          color: #ffffff;
          margin-left: 12px;
        }
      }
      .drawer {
        display: block;
        width: 26px;
        height: 26px;
        transform: translateX(14px);
      }
      .headTabs {
        display: none;
        .tItem {
          position: relative;
          width: 220px;
          text-align: right;
          height: 38px;
          font-size: 14px;
          font-family: Poppins-Light, Poppins;
          color: rgba(255, 255, 255, 0.5);
          line-height: 38px;
          .bor {
            position: absolute;
            bottom: -18px;
            left: 82px;
            width: 142px;
            height: 1px;
            background: rgba(255, 255, 255, 0.5);
          }
          .expand {
            position: absolute;
            top: 0;
            right: -20px;
            width: 10px;
            height: 8px;
            margin-left: 4px;
          }
          .Language_box {
            position: absolute;
            left: 100px;
            bottom: -200px;
            z-index: 9999;
            width: 162px;
            height: 177px;
            background: rgba(43, 67, 89, 0.15);
            border-radius: 12px;
            overflow-y: scroll;
            padding: 0 14px;
            .item {
              padding: 14px 0;
              border-bottom: 1px solid rgba(125, 125, 125, 0.1);
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
              text-align: center;
              line-height: 1;
              .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: rgba(0, 255, 247, 1);
                margin-right: 10px;
              }
            }
            .changeItemColor {
              font-size: 14px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: #ffffff;
            }
            .item:last-child {
              border: 0;
            }
          }
        }
        .tItemFFF {
          color: #fff;
        }
        .tItemBlod {
          color: #fff;
          font-weight: 700;
          /* // font-family: Poppins-Bold, Poppins; */
        }
      }
    }
    .blog-content {
      color: #fff;
      flex: 1;
      .title-content {
        padding-bottom: 24px;
        border-bottom: 1px solid rgba(217, 217, 217, 0.15);
        .title {
          margin-top: 20px;
          font-size: 30px;
          font-weight: 700;
        }
        .text {
          margin-top: 20px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .list-content {
        padding-top: 40px;
        .list-big {
          .cover {
            width: 100%;
            height: 210px;
            border-radius: 28px;
            overflow: hidden;
            .img {
              object-fit: cover;
              transition: transform 500ms;
            }
          }
          .cover:hover {
            .img {
              transform: scale(1.1);
            }
          }
          .cate {
            margin: 14px 0 14px;
            font-size: 16px;
            font-weight: 700;
            color: #f9224c;
          }
          .list-title {
            font-size: 22px;
            font-weight: 700;
          }
          .list-title:hover {
            text-decoration: underline;
          }
          .info {
            margin-top: 14px;
            font-size: 16px;
            .info_2 {
              color: #3ec5fd;
              margin-left: 6px;
            }
            .info_3 {
              width: 3px;
              height: 3px;
              background: rgba(255, 255, 255, 0.5);
              border-radius: 50%;
              margin: 0 10px;
            }
            .info_4 {
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
        .list {
          padding: 30px 0;
          flex-wrap: wrap;
          align-items: stretch;
          .item {
            width: 100%;
            margin-bottom: 20px;
            .cover {
              overflow: hidden;
              width: 100%;
              height: 160px;
              border-radius: 16px;
              object-fit: cover;
              .img {
                object-fit: cover;
                transition: transform 500ms;
              }
            }
            .cover:hover {
              .img {
                transform: scale(1.1);
              }
            }
            .cate {
              margin: 14px 0;
              font-size: 16px;
              font-weight: 700;
              color: #f9224c;
            }
            .list-title {
              font-size: 18px;
              font-weight: 700;
            }
            .list-title:hover {
              text-decoration: underline;
            }
            .info {
              margin-top: 10px;
              font-size: 16px;
              .info_2 {
                color: #3ec5fd;
                margin-left: 6px;
              }
              .info_3 {
                width: 3px;
                height: 3px;
                background: rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                margin: 0 10px;
              }
              .info_4 {
                color: rgba(255, 255, 255, 0.5);
              }
            }
          }
        }
      }
      .pagination {
        .left-active {
          margin-right: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/prev-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .left-disabled {
          margin-right: 14px;

          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/prev-disabled.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-active {
          margin-left: 14px;
          width: 20px !important;
          height: 20px !important;
          background-image: url("@/static/next-active.webp");
          background-size: 20px 20px;
          background-repeat: no-repeat;
        }
        .right-disabled {
          margin-left: 14px;

          width: 26px !important;
          height: 26px !important;
          background-image: url("@/static/next-disabled.webp");
          background-size: 26px 26px;
          background-repeat: no-repeat;
        }
        .page {
          display: flex;
          justify-content: center;
          overflow: hidden;

          .sui-pagination {
            margin: 18px 0;

            ul {
              margin-left: 0;
              margin-bottom: 0;

              li {
                line-height: 18px;
                display: inline-block;

                a {
                  display: inline-block;
                  width: 40px;
                  height: 10px;
                  text-align: center;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.5);
                  cursor: pointer;
                }

                &.active {
                  a {
                    color: #3ec6ff;
                    cursor: default;
                  }
                }

                &.prev {
                  .left-active {
                    display: block !important;
                  }
                  .left-disabled {
                    display: none !important;
                  }
                  a {
                    margin-left: 0px;
                    background-color: #fafafa;
                  }
                }

                &.disabled {
                  .left-active {
                    display: none !important;
                  }
                  .left-disabled {
                    display: block !important;
                  }
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                  a {
                    color: #999;
                    cursor: default;
                  }
                }

                &.dotted {
                  span {
                    width: 50px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 0.5);
                  }
                }

                &.next {
                  a {
                  }
                  .right-active {
                    display: block !important;
                  }
                  .right-disabled {
                    display: none !important;
                  }
                }
                &.disabled {
                  .right-active {
                    display: none !important;
                  }
                  .right-disabled {
                    display: block !important;
                  }
                }
              }
            }

            div {
              color: #333;
              font-size: 14px;
              float: left;
              width: 80px;
            }
          }
        }
      }
    }
    .footer {
      display: none;
      margin-top: 300px;
      .bottom_nav {
        align-items: flex-start;
        .logo {
          transform: translate(-60px, -77px);
          width: 182px;
          height: 182px;
        }
        .nav_list {
          align-items: flex-start;
          .item {
            margin-left: 140px;
            .item_title {
              margin-bottom: 20px;
              font-size: 21px;
              font-family: Poppins-Bold, Poppins;
              font-weight: bold;
              color: #ffffff;
            }
            .item_text {
              margin-bottom: 20px;
              font-size: 16px;
              font-family: Poppins-Regular, Poppins;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.5);
            }
          }
        }
      }
    }
  }
  .page_bottom {
    display: none;
    margin-top: 100px;
    padding: 40px 0;
    border-top: 2px solid rgba(217, 217, 217, 0.1);
    font-size: 14px;
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.2);
  }
  .app_page_bottom {
    margin-top: 60px;
    padding: 14px 40px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.03);
    font-family: Poppins-Regular, Poppins;
    color: rgba(255, 255, 255, 0.5);
  }
}
.hefl {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  margin-bottom: 12px;
}
.link {
  position: relative;
  font-size: 12px;
  div {
    height: 50px;
    line-height: 50px;
  }
}
@media (min-width: 992px) {
  .container-tt {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }

  .page_content .footer .bottom_nav .nav_list {
    align-items: flex-start;

    .item {
      margin-left: 100px;
      width: 160px;

      .item_title {
        margin-bottom: 20px;
        font-size: 18px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
      }

      .item_text {
        margin-bottom: 20px;
        font-size: 14px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
      }
    }
  }
}

@media (min-width: 1200px) {
  .container-tt {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  .nav_list {
    align-items: flex-start;

    .item {
      margin-left: 140px !important;
      width: 200px !important;

      .item_title {
        margin-bottom: 20px;
        font-size: 18px;
        font-family: Poppins-Bold, Poppins;
        font-weight: bold;
      }

      .item_text {
        margin-bottom: 20px;
        font-size: 14px;
        font-family: Poppins-Regular, Poppins;
        font-weight: 400;
      }
    }
  }
}
</style>